<template>
  <div class="app-container">
    <el-tabs tab-position="left">
      <template>
        <el-tab-pane v-for="task in list" :label="task.name" :key="task">
          <el-table :data="task.vars" style="width: 100%">
            <el-table-column prop="name" label="项目名称">
            </el-table-column>
            <el-table-column prop="val" label="项目值">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </template>
    </el-tabs>

    <div style="position: absolute;top:200px;z-index:100">
       <el-button type="success" @click="onCancel" icon="el-icon-back" circle></el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { history2task } from '@/api/workflow'

@Component({
  name: 'wk-history'
})
export default class extends Vue {
  private listLoading = true
  private list: any = []
  private listQuery = {
    page: 1,
    limit: 20,
    instid: this.$route.query.id
  }

  created() {
    this.getList()
  }

private onCancel() {
    this.$router.go(-1)
  }
  private async getList() {
    this.listLoading = true
    const { data } = await history2task(this.listQuery)
    var taskForm:any={};
    (data||[]).forEach((it:any) => {
      var vars=taskForm[it.taskname];
      if(!vars){
        vars=taskForm[it.taskname]=[];
      }
      taskForm[it.taskname].push(it);
    });
    console.log(taskForm)
    Object.keys(taskForm).forEach(it=>{
      this.list.push({name:it,vars:taskForm[it]});
    })
    //this.list = data
    this.listLoading = false
  }
}
</script>
